



<template>
<view class="video">
  <view class="left">
    <view class="item" v-for="(item,i) in left" :key="i"  @tap="go('/pages/video/video?id='+item.id)" data-url="">
      <image class="" :src="item.pic" mode="widthFix" />
      <view class="content">
        <view class="title">{{item.title}}</view>
        <view class="taglist row">
          <view  v-for="(tag,i) in item.biaoq" :key="i"    class="tag">{{tag}}</view>
        </view>
        <view class="userinfo row">
          <image class="headimg" :src="item.userlogo" />
          <view class="nickname">{{item.username}}</view>
          <image class="zan" src="/images/icon/zan.png" />
          <view class="num">{{item.zan}}</view>
        </view>
      </view>
    </view>
  </view>
  <view class="right">
    <view class="item" v-for="(item,i) in right" :key="i"  @tap="go('/pages/video/video?id='+item.id)" data-url="">
      <image class="" :src="item.pic" mode="widthFix" />
      <view class="content">
        <view class="title">{{item.title}}</view>
        <view class="taglist row">
          <view  v-for="(tag,i) in item.biaoq" :key="i"    class="tag">{{tag}}</view>
        </view>
        <view class="userinfo row">
          <image class="headimg" :src="item.userlogo" />
          <view class="nickname">{{item.username}}</view>
          <image class="zan" src="/images/icon/zan.png" />
          <view class="num">{{item.zan}}</view>
        </view>
      </view>
    </view>
  </view>
</view>


</template>

<script>
	export default {
    props: {
     
      left: {
        type:Object,
      },
      right:{
         type:Object,
      },
      h: {
        type:Number,
      }
    },
		data() {
			return {
				jump(){
          console.log(this.good.id);
        }
			};
		}
	}
</script>

<style lang="less">
  
.flex {
  display: flex;
  flex-direction: column;
}

view {
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: center;
}

.hr {
  height: 20rpx;
  background: #f5f5f5;
}

.notdata {
  text-align: center;
  font-size: 26rpx;
  color: #666;
  padding-top: 30rpx;
}

.video {
  width: 710rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  // align-items: flex-start;
  // justify-content: s;
  // flex-flow:row wrap;
  // column-count: 2;
  // column-gap: 0;
  .left,
  .right {
    width: 345rpx;
  }

  .item {
    width: 345rpx;
    display: inline-block;
    flex-grow: 1;
    padding: 25rpx 0;

    image {
      width: 345rpx;
    }

    .content {
      width: 315rpx;
      font-family: PingFang-SC-Medium;
      margin-left: 15rpx;

      .title {
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0rpx;
        color: #333333;
      }

      .taglist {
        margin-top: 15rpx;
        flex-wrap: wrap;
        //  display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // overflow: hidden;
        .tag {
          padding: 5rpx 10rpx;
          background-color: rgba(0, 130, 228, 0.2);
          font-size: 18rpx;
          color: rgba(0, 130, 228, 1);
          margin-right: 10rpx;
          // margin: 5rpx auto
          margin-bottom: 10rpx;
          
        }
      }

      .userinfo {
        font-size: 20rpx;
        line-height: 20rpx;
        color: rgba(148, 160, 174, 1);
        margin-top: 15rpx;

        .headimg {
          width: 40rpx;
          height: 40rpx;
          border-radius: 100%;
        }

        .nickname {
          margin-left: 10rpx;
        }

        .zan {
          width: 20rpx;
          height: 20rpx;
          margin-left: auto;
        }

        .num {
          margin-left: 10rpx;
        }
      }
    }
  }

  .fl {
    float: left;
  }

  .rt {
    float: right;
  }
}
</style>
